<template>
	<div>
		<mt-header title="账户信息" :fixed="true">
		  <img src="../../assets/nav_back.png" @click="back"  slot="left"  style="width: 0.4rem;margin-left: 0.4rem;"/>
		</mt-header>
		<v-Content>
				<div class="wrap1">
			        <div>
			            <span class="main">我的头像</span>
			        </div>
			       <img :src="photo" @click="addPic"  />
			       
			    </div>
			    <div class="wrap1 wrap2" style="border: none;" @click="realname">
			    	<div>
			            <span class="main">实名认证</span>
			        </div>
			       <p>{{zfb}}</p>
			    </div>
			     <div class="wrap1 wrap2">
			    	<div>
			            <span class="main">手机号码</span>
			        </div>
			       <p>{{phone}}</p>
			    </div>
			    
		      	<div class="wrapOptional"  @click='bankList'>
		      			<span>我的银行卡</span>
		      			<p style="color: #FFFC25; margin-left:5.3rem;">{{bankCount | toDoT}} </p>
		      			<img src="../../assets/arrow_right.png"/>
		      		
		      	</div>
		      	<div class="wrapOptional" style="margin-top:.2667rem;" @click='loginpassword'>
		      			<span>登录密码</span>
		      			<p style="margin-left: 6.2rem;">修改</p>
		      			 <img src="../../assets/arrow_right.png"/>
			      
		      	</div>
		      	<div class="wrapOptional"  @click='findWithdrawals' >
		      			<span>设置提现密码</span>
		      			<p style="margin-left: 5.3rem;">修改</p>
		      			 <img src="../../assets/arrow_right.png"/>
		      	</div>
		      	
		      	<div class="wrap1 wrap3" @click="clear">
			      	 退出登录
			    </div>
			     <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" @change="onFileChange" style="display: none;" class="file">
   		</v-Content>
	</div>
</template>

<script>
	
	import my from '@/api/my/index'
	import { toast,delCookie} from '@/util/index'
	import { MessageBox,Header } from 'mint-ui'
	import Content from '@/components/ContentBottom'
	export default {
	data() {
	    return {
	    	headerMess:{
		        src:require("../../assets/nav_back.png"),
		        headerText: '账户信息',
		        right: ''
		    },
	      	isActive: false,
	      	photo:require("../../assets/portrait_default.png"),
	     	phone:"",
	     	data:"",
	     	bankCount:"",
	     	zfb:"",
	     
	    }
	},
	filters:{
		toDoT(val){
			if(val==0){
				 return "未添加";
			}else{
				return val
			}
			
		}
	},
  	components: {
    	"mt-header":Header,
		"v-Content":Content
  	},
  	methods: {
  		back() {
			this.$router.push({path: '/my'})
		},
  		clear(){
  			delCookie("token");
  			localStorage.clear();
  			this.$router.push({path:'/'})
  			this.$store.dispatch('saveRegisterPhone',"");
  			this.$store.dispatch('savePhoneCode',"");
  		},
	    toAccountinformation() {
	      console.log('Alipay')
	      this.$router.push({path:'/toAccountinformation'})
	    },
	    
		loginpassword(){
			 this.$router.push({path:'/changePassword'})
		},
		bankList(){
			if(!this.data){
				MessageBox.confirm('请先实名认证',"").then(()=> {
				  	this.$router.push({path:'/realnameInfo'})
				})
			}else if(this.data&&this.data.authStatus==2){
				this.$router.push({path:'/bankList'})
			}else{
				MessageBox.confirm('认证失败，请重新实名认证',"").then(()=> {
				  	this.$router.push({path:'/realnameInfo'})
				})
			}
			
		},
		realname(){
			if(!this.data){
				//MessageBox.confirm('请先实名认证',"").then(()=> {
				  	this.$router.push({path:'/realnameInfo'})
				//})
			}else if(this.data&&this.data.authStatus!=2){
				//MessageBox.confirm('认证失败，请重新实名认证',"").then(()=> {
				  	this.$router.push({path:'/realnameInfo'})
				//})
			}
			
		},

		findWithdrawals(){
			this.$router.push({path:'/findWithdrawals'})
		},
		
		addPic () {
	      $('input[type=file]').trigger('click')
	      return false
	    },
	    onFileChange (e) {
	      var files = e.target.files || e.dataTransfer.files
	      if (!files.length){
	      		return
	      } 
	      this.createImage(files)
	    },
	    createImage (file) {
	      var that = this
	      var reader = null
	      var leng = file.length
	     
	      for (var i = 0; i < leng; i++) {
	        reader = new window.FileReader()
	        reader.readAsDataURL(file[i])
	        reader.onload = function (e) {
	          that.photo=e.target.result;
	          var str =e.target.result.replace(/^data:image\/(jpeg|png|gif|jpg);base64,/,"");  ///^data:image\/(jpeg|png|gif);base64,/
	          that.loadImg(str);
	        }
	      }
	    },
	    loadImg(img){
	    	let senddata = {
				imgBase64Str:img,
				userId:window.localStorage.getItem("token"),   //ios11 手机获取不到 localstatoge
				plat:"mlj"
				
			}
			my.doUploadphoto(senddata).then((res) => {
				if (res.data.code == 200) {
					console.log(this.$store.state.token);
				} else {
					toast(res.data.message)
				}
			})
	   },
		creatDom(res){
			if(res.data.data.photo){
				this.photo=res.data.data.photo;
			}
			
			this.phone=res.data.data.phone;
			this.data=res.data.data.userAuth;
			this.bankCount=res.data.data.bankCount;
			//{{data.realname}}（{{data.idcard}}）
			if(res.data.data.userAuth&&res.data.data.userAuth.authStatus==2){
				this.zfb=res.data.data.userAuth.realname+"("+res.data.data.userAuth.idcard+")";
			}else if(res.data.data.userAuth&&res.data.data.userAuth.authStatus==3){
				this.zfb="未通过";
			}else{
				this.zfb="未认证";
			}
		}
  	},
  	mounted(){
  		let senddata = {
			userId:window.localStorage.getItem("token"),//this.$store.state.token 
			plat:"mlj"
		}
		my.getMess(senddata).then(res=>{
            if(res.data.code==200){
               	this.creatDom(res);
            } else if(res.data.code==222){
                this.$router.push({path:'/realnameInfo'})
            }else{
            	 console.log(res);
            }
      	})
	},
	beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	     next()
	}
}
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.header{
	padding:0 @p30;
	display: flex;
	justify-content:space-between;
	align-items: center;
	height:@hwrap;
	color:#fff;
	font-size:.48rem;
	img,.img{
		width: 30px;
		height: 30px;
	}
}
.wrap1 {
    display: flex;
    justify-content: space-between;
    height: 2.1333rem;
    padding: 0 @p30;
    font-size: @f32;
    align-items: center;
    background-color: @liBg;
    margin:.2667rem 0;
    img {
    	display: block;
        width: 1.44rem;
        height: 1.44rem;
        border-radius: 1.44rem;
    }
    p{
    	color:@fcolor;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    div {
        color: @fcolor;
        padding: 0 ;
        flex: 1 1 auto;
        display: flex;
        justify-content: space-between;
        span {
            color: @actColor;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .main {
            color: #fff;
        }
    }
}
.wrapOptional{
	color: white;
	display: flex;
    justify-content: space-between;
    height:1.28rem;
    padding: 0 @p30;
    font-size: @f32;
    align-items: center;
    background-color: @liBg;
    border-top: #262934 1px solid;
    p{
    	color: #475168;
    	
    }
    img{
		width:@f28;
		height:0.48rem ;
	}
}
.wrap2{
	height: 1.28rem;
	margin: 0;
	border-top: #262934 1px solid;
}
.wrap3{
	display: block;
	width: 9.2rem;
	margin: 0 auto;
	text-align: center;
	height: 1.173333rem;
	line-height: 1.173333rem;
	background: #ffdd25;
	color:#8D4006;
	border-radius: .06rem;
	margin-top: .8rem;
}

</style>
